<template>
    <div>
       <!-- 面包屑组件 -->
        <Crumbs :img="portrait" text1="个人中心" :text3="account"/>
        <div class="personal-center-content">
          <h4>管理员信息</h4>
          <p class="text">管理员ID：{{id}}</p>
          <p class="text">账号：{{account}}</p>
          <p class="text">用户组：{{userGroup}}</p>
          <p class="text">创建时间：{{ctime}}</p>
          <p class="text">
              管理员头像：
              <img :src="imgUrl" style="width:80px; height:80px; vertical-align:top">
          </p>
          <p class="text">上传头像：
              <el-upload
              class="avatar-uploader"
              action="http://localhost:5000/users/avatar_upload/"
              :show-file-list="false"
              :data={id}
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </p>
        </div>

    </div>
</template>

<script>
    import Crumbs from "../../components/Crumbs"
    import {personalCenter} from "@/apis/api"
    import {conversionTime} from "@/utlis/utlis.js"
    // let id=JSON.parse(window.localStorage.getItem("key"))
export default {
    components:{
        Crumbs
    },
    data(){
        return{
            portrait:"",
            account:"",
            ctime:"",
            id:0,
            imgUrl:"",
            userGroup:"",
            imageUrl:"",
        }
    },
    created(){
       this.obtainInfo()
       
    },
    methods:{
        obtainInfo(){
             personalCenter({
                id:JSON.parse(window.localStorage.getItem("key"))
            })
            .then(res=>{
                if(res.status===200){
                    console.log(res)
                    res.data.accountInfo.ctime=conversionTime(res.data.accountInfo.ctime)
                    this.account=res.data.accountInfo.account,
                    this.ctime=res.data.accountInfo.ctime
                    this.id=res.data.accountInfo.id
                    this.imgUrl=res.data.accountInfo.imgUrl
                    this.userGroup=res.data.accountInfo.userGroup
                    this.portrait=res.data.accountInfo.imgUrl
                    window.localStorage.setItem("imgUrl",res.data.accountInfo.imgUrl)
                    window.localStorage.setItem("account",res.data.accountInfo.account)
                }
            })
        },
        handleAvatarSuccess(res){
            // console.log(res)
            this.imgUrl=res.imgUrl;
            this.obtainInfo();
        }
    },
}
</script>

<style lang=less scoped>
    .personal-center-content{
      flex:1;
      overflow: scroll;
      margin:20px;
      padding:20px;
      background-color:#fff;
      h4{
        padding-bottom:10px;
        border-bottom:1px solid #eee;
        color:darkslategray;
      }
      .text{
          margin-top:15px;
          padding-bottom:10px;
          font-weight: 800;
          color:darkslategray;
          border-bottom:1px solid #eee;
      }
  }

  .avatar-uploader,.el-upload {
        margin-top:15px;
        width:180px;
        height:180px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    /* .avatar-uploader.el-upload:hover {
        border-color: #409EFF;
    } */
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>